<template>
  <view class="login">
    <view class="content">
      <view class="header">
        <image :src="logoImage" />
      </view>
      <view class="main">
        <wInput v-model="form.email" type="text" maxlength="30" :placeholder="$t('login.mobileNumber')"></wInput>
        <wInput v-model="form.password" type="password" :placeholder="$t('login.password')" isShowPass></wInput>
      </view>
      <wButton class="wbutton" :text="$t('login.login')" :rotate="isRotate" @click="startLogin"></wButton>

      <view class="footer">
        <navigator url="forget" open-type="navigate">{{ $t('login.Forgot') }}</navigator>
        <text>|</text>
        <navigator url="register" open-type="navigate">{{ $t('login.Register') }}</navigator>
      </view>
    </view>

    <view class="more" :class="{ more2: isShow, more3: !isShow }">
      <view class="more-item" @click="cutLanguage('zh')">
        <text>简体中文</text>
      </view>
      <u-line></u-line>
      <view class="more-item" @click="cutLanguage('en')">
        <text>English</text>
      </view>
    </view>
  </view>
</template>

<script>
import wInput from '../../components/watch-login/watch-input.vue'
import wButton from '../../components/watch-login/watch-button.vue'

export default {
  components: {
    wInput,
    wButton
  },

  data() {
    return {
      isShow: false,
      logoImage: '/static/logo.png',
      form: {
        email: '',
        password: ''
      },
      isRotate: false, //是否加载旋转
    }
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("login.login")
    });
  },
  methods: {
    async startLogin() {
      if (this.isRotate) return false
      this.isRotate = true;
      setTimeout(() => {
        this.isRotate = false;
        uni.reLaunch({
          url: '/pages/me/index'
        })
      }, 1000)
    },
    onNavigationBarButtonTap(e) {
      this.isShow = !this.isShow
    },
    cutLanguage(i) {
      this.$i18n.locale = i;
      uni.setStorageSync('i18n-locale', i);
      this.isShow = false;
      uni.setNavigationBarTitle({
        title: this.$t("login.login")
      });
    },

  }
}
</script>

<style lang="scss">
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');

.more {
  width: 70px;
  background-color: rgb(77, 77, 77);
  position: fixed;
  border-radius: 10px;
  // top: 0px;
  /* #ifdef APP-PLUS */
  top: 0px;
  /* #endif */
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  right: 5px;
  z-index: 99;
  font-size: 12px;

  .more-item {
    padding: 20rpx;
    text-align: center;

    text {
      margin: 2px auto;
      color: #fff;
    }
  }
}

.more2 {
  transition-duration: 0.5s;
  transform: translateY(0px);
}

.more3 {
  transition-duration: 0.5s;
  transform: translateY(-116px);
}
</style>
